<!--
* @fileName detail.vue
* @author caoke
* @date 2022/10/19 09:57:42
* @version V1.0.0
* @description 
!-->
<template>
  <div class="container">
    <div class="header">
      <div class="main">
        <div class="left">
          <div class="title">建筑施工行业安全生产责任保险</div>
          <div class="subtitle">
            <h1>等同于质量保修保证金！</h1>
            <h1>保险机构参与风控，质量更有保证！</h1>
            <h1>可免工程款预留，实现全额工程款！</h1>
            <h1>价格优惠，方便快捷！</h1>
            <h1>足不出户，一键购买！</h1>
            <h1>支持保单在线验真！</h1>

          </div>
        </div>
        <div class="right">
          <div class="title">
            ￥3000.00起
          </div>
          <el-button type="danger" class="btn">立即投保</el-button>
        </div>
      </div>

    </div>
    <div class="main w">
      <detail-card title="产品特色">
        <div class="feature-container">
          <div class="feature-card" v-for="(i,index) in feature" :key="index">
            <img :src="i.img" alt="">
            <div class="bg">{{i.title}}</div>
          </div>

        </div>
      </detail-card>
      <detail-card title="产品详情">
        <div class="detail-container">
          <el-descriptions :column="1" border label-class-name="my-label" content-class-name="my-content">
            <template v-for="(i,index) in tableData">
              <el-descriptions-item :label="i.label" :key="index">
                <div class="main">
                  <div class="detail" v-for="(j,index) in i.detail" :key="index">
                    <h1>{{j.title}}</h1>
                    <div class="describe" v-for="(k,index) in j.describe" :key="index">{{k}}</div>
                  </div>

                </div>
              </el-descriptions-item>
            </template>

          </el-descriptions>

          <div class="bottom">
            <span>温馨提示：</span>
            ①以上是保障内容摘要，详细保障责任等相关内容请以条款约定为准。②投保人或保险标的所在地无我社 会员服务工作站的，投保人/被保险人可在线申请办理相关服务，并不影响保单保障的权益。如遇相关问题，投保人/被保险人可拨打我社全国统一客服电话4008189666。
          </div>
        </div>

      </detail-card>
      <detail-card title="投保须知">
        <div class="notice-container">
          <div class="item"> 1.本产品由长安保险承保，投保前，请您仔细阅读投保材料及说明，完全理解并认可本产品保险条款、我社章程后，如实填写投保信息。您所填写的内容在投保过程将构成签订保险合同的要约和会员申请书，并作为我社评价风险、签发保险单的依据。</div>
          <div class="item"> 2.本产品保险期间内每一投保人限投保一份，多次投保无效。</div>
          <div class="item"> 3.本产品保险期间最少为3个月，最长为1年；<span>请自主选择保险起期，保险起期不可晚于项目开标日期。</span>保单生效前您可以随时退保；保单生效后，本社不再接受退保申请。</div>
          <div class="item"> 4.本产品的保障区域为中华人民共和国境内（不含港、澳、台地区）。</div>
          <div class="item"> 5.如实告知：您在投保本产品时，应如实填写投保信息、我社提出的询问事项等，依法履行如实告知义务；未履行如实告知义务，您的权益将受损；<span>违反如实告知的后果！</span> </div>
          <div class="item"> 6.本产品为您提供电子保单或纸质保单。如果您选择电子形式保单，电子保单将发送至您投保时填写的邮箱 <span>（如选择电子保单，我社将不再寄送纸质保单）</span>。根据《中华人民共和国合同法》第十一条规定，数据电文是合法的合同表现形式，电子保单和纸质保单具有同等法律效力。如果您选择纸质保单及发票，请在投保信息中填写正确的接收地址，本社将为您免费快递寄送。
          </div>
          <div class="item"><span>7.投保本产品前，请您认真阅读本《投保须知》和《长安相互建设工程投标保证保险条款》的保险责任和责任免除，特别是免除保险人责任的条款（包括但不限于责任免除、投保人和被保险人义务、保险金申请与给付、退保规则等重大约定事项），并确认已充分理解和接受上述内容，同意以此作为订立保险合同的依据。</span></div>
          <div class="item">8.投保本保险产品前，请您认真阅读 <span>《长安财产相互保险社章程》</span>的会员权利与义务等内容，尤其是会员资格和权益的获得或者终止条件等关键信息，需要充分理解且同意遵守。<span>若您违反《长安财产相互保险社章程》，我社有权根据章程等规定终止您的会员资格或调整相关权益。</span></div>
          <div class="item">9.未尽事宜以《中华人民共和国保险法》等相关法律法规、保险监管部门相关规定及上述产品条款约定内容为准，如果您还有任何疑问，请拨打客户服务电话进行咨询。</div>
          <div class="item">
            10.保险费账户信息：
            <div>账户名称：<span>XXXXXX</span></div>
            <div>账 号：<span>XXXXXXXXXXXXXXXXXXXX</span></div>
            <div>开 户 行：<span>XXXXXX</span></div>
            <div>联 行 号：<span>XXXXXX</span></div>
            <div>保险费支付方式：<span>支持银行转账、支付宝、微信，具体以投保时提示为准。</span></div>
          </div>
          <div class="item">11.我司严格遵守现行的关于个人信息、投保交易和交易安全的法律法规，采取充分的技术手段和管理措施，保护个人信息、数据和隐私不被非法泄露或披露给未经许可的第三方 <span>（具体保障措施）</span></div>
        </div>

      </detail-card>
      <detail-card title="理赔指南">
        <div class="handbook-container">
          <div class="handbook-card">
            <div class="left">
              <img src="@/assets/images/product/出险通知@2x.png" alt="">
              <div class="title">出险通知</div>
            </div>
            <div class="right">
              <div class="title">保险事故发生后，请立即向我社报案。我社将及时指导您进行事故处理，并派专人提供理赔服务。您在获悉保险事故发生后，应迅速采取施救、整理措施以防止损失扩大。</div>
              <div class="subtitle">电话报案：<span>拨打我社客户服务电话。</span></div>
              <div class="subtitle">线下报案：<span>联系我社会员服务专员。</span></div>
            </div>

          </div>
          <div class="handbook-card">
            <div class="left">
              <img src="@/assets/images/product/定损@2x.png" alt="">
              <div class="title">损失检验及定损</div>
            </div>
            <div class="right">
              <div class="title">在接到报案后，我社会指派专业人员查勘事故现场，确定责任范围和损失金额，如涉及第三方责任，您应及时向有关责任方提出索赔，并保留追偿权利减少您的损失。</div>
              <div class="subtitle">
                进度查询方式：
                <div><span>登陆我社官网，在理赔查询处查询。</span></div>
              </div>
            </div>

          </div>
          <div class="handbook-card">
            <div class="left">
              <img src="@/assets/images/product/提供索赔@2x.png" alt="">
              <div class="title">提供索赔单证</div>
            </div>
            <div class="right">
              <div class="title">损失勘验完毕，您须按不同险种类别提供相关索赔单证，我社查勘人员也将指导您填写单证做必要理赔指导。</div>
              <div class="subtitle">
                理赔资料查询方式：
                <div> <span>电话咨询：拨打我社客户服务电话或联系查勘人员（会员服务专员）进行查询。公司官网：登录我社官网，在资料下载处下载</span></div>
              </div>
            </div>

          </div>
          <div class="handbook-card">
            <div class="left">
              <img src="@/assets/images/product/赔偿结案@2x.png" alt="">
              <div class="title">赔偿结案</div>
            </div>
            <div class="right">
              <div class="title">您在办妥上述索赔手续后，我社将迅速按保险合同约定支付赔款。</div>
              <div class="subtitle">
                付款通知：
                <div><span>赔款成功转账后，您会收到支付提醒短信。此外，您还可以登陆我社官网，在理赔查询处查询。</span></div>
              </div>
            </div>

          </div>
        </div>

      </detail-card>

    </div>
  </div>
</template>

<script>
import DetailCard from "./components/detail-card/detail-card.vue";

export default {
  components: { DetailCard },
  name: "",
  data() {
    return {
      feature: [
        {
          img: require("@/assets/images/product/高效@2x.png"),
          title: "高效解决产品需求",
        },
        {
          img: require("@/assets/images/product/优惠@2x.png"),
          title: "价格优惠  方便快捷",
        },
        {
          img: require("@/assets/images/product/电子保单@2x.png"),
          title: "支持电子保单足不出户",
        },
        {
          img: require("@/assets/images/product/在线验真@2x.png"),
          title: "支持保单在线验真受损",
        },
        {
          img: require("@/assets/images/product/必须投保@2x.png"),
          title: "新安法要求高危行业必须投保",
        },
      ],
      tableData: [
        {
          label: "投保人",
          detail: [
            {
              title: "参与工程投标的施工企业",
              describe: [],
            },
          ],
        },
        {
          label: "被保险人",
          detail: [
            {
              title: "工程招标方，即建设单位",
              describe: [],
            },
          ],
        },
        {
          label: "保险责任",
          detail: [
            {
              title:
                "根据《中华人民共和国招标投标法》、《中华人民共和国招标投标法实施条例》，在保险期间内，投保人在向被保险人招标建设工程投标的过程中，发生以下列明的保险事故，被保险人可向保险人提出索赔，保险人依据本保险合同的约定，在保险金额内承担损失赔偿责任： ",
              describe: [
                "从投标截止日起至投标文件有效期满前，投保人未经被保险人同意或者违反《建设工程招标文件》撤 销投标文件；",
                " 投保人与其他投标人相互串通投标；",
                " 投保人弄虚作假行为；",
                " 中标后未按《建设工程招标文件》的要求签署《建设工程施工合同》；",
                " 《建设工程招标文件》规定的其他有关投标实质性违约情形。",
              ],
            },
          ],
        },
        {
          label: "责任免除",
          detail: [
            {
              title: "（一）出现下列任一情形时，保险人不承担赔偿保险金的责任：",
              describe: [
                "被保险人未履行《建设工程招标文件》条款规定义务的； 因被保险人的原因，导致投保人不能履行投标人义务的； 被保险人变更《建设工程招标文件》，未经保险人书面同意确认的； 保险事故发生后，在保险人未赔偿保险金之前，被保险人放弃对投保人的担保人（如有）请求赔偿权 利的； 不可归责于投保人的情形。",
              ],
            },
            {
              title: "（二）下列原因造成的损失、费用和责任，保险人不负责赔偿：",
              describe: [
                "战争、敌对行动、军事行为、武装冲突、罢工、骚乱、暴动、恐怖活动或恐怖袭击；",
                "核辐射、核爆炸、核污染及其他放射性污染；",
                "大气污染、土地污染、水污染及其他各种污染；",
                "政府征用、行政行为或司法行为；",
                " 洪水、台风、地震、海啸等自然灾害。",
              ],
            },
            {
              title: "（三）下列损失、费用和责任，保险人不负责赔偿：",
              describe: [
                "被保险人根据《建设工程招标文件》应该承担的责任；",
                "   被保险人与投保人就《建设工程招标文件》产生纠纷所致的任何法律费用，包括但不限于诉讼或仲裁费、财产保全或证据保全费、强制执行费、评估费、拍卖费、鉴定费、律师费、差旅费、调查取证费等；",
                "被保险人以外的第三人的任何损失；",
                "罚款、罚金及惩罚性赔偿；",
                "精神损害赔偿；",
                "按本保险合同中载明的免赔率（额）计算的免赔额；",
                "其他不属于本保险责任范围内的损失、费用和责任。",
              ],
            },
          ],
        },
        {
          label: "投保/承保流程：",
          detail: [
            {
              title: "① 点击立即投保 ② 填写订单 ③ 付款",
              describe: [],
            },
          ],
        },
        {
          label: "保全（退保）流程：",
          detail: [
            {
              title:
                "① 通过我社官网、拨打统一客服电话或联系我社服务人员申请      ② 审核      ③ 完成",
              describe: [],
            },
          ],
        },
      ],
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang='scss' scoped>
::v-deep .my-label {
  width: 200px;
  height: 19px;
  font-size: 19px;
  font-family: Microsoft YaHei !important;
  font-weight: bold !important;
  color: #f15a21;
  border: 1px solid #f9926b !important;
}

::v-deep .my-content {
  // font-size: 12px;
  font-family: Microsoft YaHei !important;
  font-weight: 400 !important;
  color: #2d2d2d;
  border: 1px solid #f9926b !important;
}

.container {
  // 头部区
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 540px;
    background: url(../../assets/images/product/bg.png) no-repeat;
    background-size: 1920px auto;

    .main {
      box-sizing: border-box !important;
      display: flex;
      width: 1200px;
      height: 400px;
      background-color: rgba($color: #000000, $alpha: 0.6);
      padding: 40px;

      .left {
        display: flex;
        flex-direction: column;
        flex: 7;
        color: #ffffff;
        .title {
          font-size: 36px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
        }
        .subtitle {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          margin-top: 36px;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          color: #f9f9f9;
          line-height: 42px;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 3;
        border-left: 1px solid $theme;
        padding: 40px;
        .title {
          // text-align: center;
          font-size: 36px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #f76f40;
        }
        .btn {
          margin-top: 24px;
          width: 228px;
          height: 66px;
          background: #f15920;
          border-radius: 8px;
          font-size: 30px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          line-height: 42px;
        }
      }
    }
  }
  //内容区
  .main {
    //
    .feature-container {
      display: flex;
      justify-content: space-around;
      width: 100%;
      .feature-card {
        width: 225px;
        height: 225px;
        font-size: 19px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2d2d2d;
        img {
          position: relative;
          bottom: -40px;
          width: 88px;
          height: auto;
          margin: auto;
        }

        .bg {
          box-sizing: border-box;
          // display: flex;
          // flex-direction: column;
          // justify-content: center;
          // align-items: center;
          text-align: center;
          width: 225px;
          height: 111px;
          padding: 50px 20px 10px;
          background: #f9f3f1;
          box-shadow: 5px 7px 66px 0px rgba(217, 221, 228, 0.28);
          border-radius: 9px;
        }
      }
    }
    // 产品详情
    .detail-container {
      box-sizing: border-box;
      width: 100%;
      padding: 38px;

      .bottom {
        width: 100%;
        padding: 23px;
        font-size: 14px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666ff;
        span {
          color: #f15a21;
        }
      }
    }

    .notice-container {
      box-sizing: border-box;
      width: 100%;
      padding: 45px;
      background: #f8e8e2;
      border-radius: 9px;

      font-size: 19px;
      font-family: Microsoft YaHei !important;
      font-weight: 400;
      color: #2d2d2d;
      line-height: 28px;

      span {
        color: #f15a21ff;
      }
    }
    .handbook-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      flex-wrap: wrap;
      margin-bottom: 30px;
      .handbook-card {
        margin-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        width: 591px;
        height: 234px;
        background: #ffffff;
        border: 1px solid #f8e8e2;
        box-shadow: 5px 7px 66px 0px rgba(217, 221, 228, 0.28);
        border-radius: 9px;
        padding: 26px;

        .left {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 78px;
            height: auto;
          }
          .title {
            text-align: center;
            width: 94px;
            font-size: 23px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #2d2d2d;
            margin-top: 27px;
          }
        }
        .right {
          width: 375px;
          height: 159px;
          font-size: 19px;
          font-family: Microsoft YaHei !important;
          font-weight: 300;
          color: #4d4d4d;
          line-height: 28px;
          .subtitle {
            color: #f15a21ff;
            font-weight: 700;
            span {
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
</style>